Dynamic Drive DHTML Scripts- Pop-up image Script

Home

Here

Pop-up image Script IE

Credits: Dynamic Drive

Description: Want a quick and lightweight method to make your images "pop up", but depressed when the mouse is held down over them? With the help of DHTML, you can, using scripting, and only scripting! This script creates the illusion of an elevated image by applying a shadow and shifting the image to the up and left. When the user holds down the mouse, the shadow is deleted, and the image shifted back to its usual position. There's no need to create alternate versions of the same image, since the entire effect is generated through code. Note that not every image is suitable to be "popped up"; please read notes at the end of the page for more info.

Demo:

Original Images	Images with pop up script added

Directions: Simply insert the below into the <head> section of your page:

Giving an image a pop-up effect: To add the pop up effect to an image, just add the below line of code into the <img> tag in question:

class="popshadow"

For example:

Prepare the see your image pop up (in IE 4.x only, of course)!

Notes: All good things have their shortcomings, and this script is no different. Only certain types of images should be "popped" up, due to the fact that DHTML can only apply a shadow to these types of images. A shadow can only be applied to an image with a transparent background. DHTML applies the shadow where the transparent and non-transparent areas meet. Just test the script on a variety of images to see what we mean.

p.s: You can use a graphics program to manipulate the transparency of an image. How to do that differs from program to program, and is beyond the scope of this site!

About

Help Hot Line

Having trouble getting the current script on this page to work? Found a bug? Tell us about it, and we'll try to help you out the best we can.

Submit a script!

Think you've created a great DTHML script and would like the world to share it? Click here for submission details.

Link to us!

If you find this script useful, we would greatly appreciate a link back to us. Click on the below graphic for details.